<template>
  <div class="cardArea">
    <!-- 标题 -->
    <div class="cardArea_title">
      <div class="cardArea_title_label"></div>
      <div class="cardArea_title_content">流程发布</div>
    </div>
    <!-- 提示 -->
    <div class="cardArea_tips">
      <div class="cardArea_tips_name" v-if="formDefine">
        <div class="cardArea_tips_name_width">
          流程名称：
          <a-popover placement="topLeft">
            <template slot="content">
              <span>{{ formDefine.name_ }}</span>
            </template>
            <span>{{ formDefine.name_ }}</span>
          </a-popover>
        </div>
        <div class="cardArea_tips_name_item cardArea_tips_name_width">
          英文标识:
          <a-popover placement="topLeft">
            <template slot="content">
              <span>{{ formDefine.key_ }}</span>
            </template>
            <span>{{ formDefine.key_ }}</span>
          </a-popover>
        </div>
        <div class="cardArea_tips_name_item cardArea_tips_name_width">
          分类:
          <a-popover placement="topLeft">
            <template slot="content">
              <span>{{ formDefine.category_ }}</span>
            </template>
            <span>{{ formDefine.category_ }}</span>
          </a-popover>
        </div>
      </div>
      <!-- <div class="cardArea_tips_record" v-if="statistics && formDefine.draft != 3200">
        <div>当前流程版本为{{ statistics.maxVersion ? statistics.maxVersion : 0 }}号</div>
        <div class="cardArea_tips_name_item">
          运行中的流程实例{{ statistics.currently ? statistics.currently : 0 }}个
        </div>
        <div class="cardArea_tips_name_item">已完成的流程实例{{ statistics.complete ? statistics.complete : 0 }}个</div>
        <div class="cardArea_tips_name_tips">*发布后，新流程将使用新的环节和表单配置</div>
      </div> -->
    </div>
    <div class="processArea" v-if="statistics && formDefine.draft != 3200">
      <div class="processArea_img">
        <img src="@/assets/images/guide/release.png" />
      </div>
      <div class="processArea_right">
        <div class="processArea_right_item">
          <div class="processArea_right_item_icon"></div>
          <div class="processArea_right_item_label">
            版本：当前流程版本为{{ statistics.maxVersion ? statistics.maxVersion : 0 }}号
          </div>
        </div>
        <div class="processArea_right_item">
          <div class="processArea_right_item_icon"></div>
          <div class="processArea_right_item_label">
            运行：运行中的流程实例{{ statistics.currently ? statistics.currently : 0 }}个
          </div>
        </div>
        <div class="processArea_right_item">
          <div class="processArea_right_item_icon"></div>
          <div class="processArea_right_item_label">
            完成：已完成的流程实例{{ statistics.complete ? statistics.complete : 0 }}个
          </div>
        </div>
        <div class="processArea_tips">*发布后，新流程将使用新的环节和表单配置</div>
      </div>
    </div>
    <!-- tabs标签 -->
    <div class="cardArea_tabs">
      <a-tabs @change="tabChange" default-active-key="1">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="picture" />
            流程图
          </span>
          <div class="cardArea_tabs_item" v-if="tabsIndex == 0">
            <img :src="processimg" :data-original="processimg" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab">
            <a-icon type="container" />
            流程表单
          </span>
          <div>
            <TaskFormView :isEmbed="true"></TaskFormView>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 按钮 -->
    <div class="cardArea_button">
      <a-button :style="{ marginRight: '30px' }" icon="rollback" @click="handleBack"> 返回引导页 </a-button>
      <a-button
        v-show="statistics && statistics.maxVersion > 0"
        :style="{ marginRight: '30px' }"
        :loading="loading"
        icon="retweet"
        @click="updaeFormDefine"
      >
        更新流程表单
      </a-button>
      <a-button :loading="loading" type="primary" icon="check" @click="handleSave"> 发布 </a-button>
    </div>
  </div>
</template>

<script>
import {
  viewAct_dsn_form_define,
  publish,
  formStatistics,
  updateMaxFormDefine,
} from '@/api/workflow/act_dsn_form_define.js'
import { YesNo } from '@/enumeration/YesNo.js'
import { BASE_URL } from '@/utils/request.js'
import TaskFormView from '@/views/workflow/Wf_NodeView.vue'
export default {
  data() {
    return {
      loading: false, // 按钮加载状态
      statistics: null, // 最大版本的表单定义
      pageinfo: { pageSize: 2147483647, sort: 'field_', order: 'asc' }, // 回显查询条件
      base_url: BASE_URL, // 浏览器url前缀
      processimg: '', // 流程图片地址
      YesNo: YesNo, // 是否的枚举
      formDefine: {}, // 表单定义
      tabsIndex: 0, // 选中得tabs标签下标
    }
  },
  created() {
    if (this.$route.params.formid != 'undefined') {
      this.findFormDefine(this.$route.params.formid)
    } else {
      this.$message.error('参数缺失')
    }
    if (this.$route.params.modelKey != 'undefined') {
      this.findMaxFormDefine(this.$route.params.modelKey)
    }
  },
  methods: {
    // 仅更新流程表单, 不发布流程
    updaeFormDefine() {
      let that = this
      this.$confirm({
        title: '更新表单',
        content: `此操作只会更新流程表单，不会影响现有的流程及版本，是否确定？`,
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk: () => {
          that.loading = true
          updateMaxFormDefine(that.formDefine.id)
            .then((res) => {
              if (res.code == 0) {
                that.$message.success('更新成功')
              }
            })
            .finally(() => {
              that.loading = false
            })
        },
        onCancel: () => {},
      })
    },
    // 查询最高版本的流程表单定义
    findMaxFormDefine(modelKey) {
      formStatistics(modelKey).then((res) => {
        console.log('统计数据', res)
        if (res.code == 0) {
          this.statistics = res.data
        }
      })
    },
    // 表单定义发布
    formPublish(formid, modelKey, tenantid) {
      this.loading = true
      const savem = this.$message.loading('流程正在发布中...', 0)
      publish(formid, modelKey, tenantid)
        .then((res) => {
          console.log('表单流程发布', res)
          // res.data == true 说明发布成功
          if (res.data) {
            this.$message.success('发布成功')
            setTimeout(() => {
              this.handleBack()
            }, 1500)
          } else {
            this.$message.error('发布失败，请检查流程配置')
          }
        })
        .finally(() => {
          this.loading = false
          setTimeout(savem, 0)
        })
    },
    // 标签页切换
    tabChange(index) {
      if (index == 2) {
        // 初始化表单页面
      }
    },
    // 查询流程定义
    findFormDefine(formid) {
      viewAct_dsn_form_define({ formid: formid }).then((res) => {
        console.log('流程定义', res)
        if (res.code == 0) {
          // 加载图片
          this.processimg = this.base_url + '/flow/viewCharUnpublishedDiagram?modelKey=' + res.data.key_
          this.formDefine = res.data
        }
      })
    },
    // 发布
    handleSave() {
      let that = this
      this.$confirm({
        title: '流程发布',
        content: `发布后，新流程将使用新的环节和表单配置，是否发布？`,
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk: () => {
          that.formPublish(that.formDefine.id, that.formDefine.key_)
        },
        onCancel: () => {},
      })
    },
    // 返回
    handleBack() {
      this.$router.push({ path: `/Wf_FormGuide/edit/${this.$route.params.formid}` })
    },
  },
  components: {
    TaskFormView,
  },
}
</script>

<style scoped>
.cardArea {
  background-color: #ffffff;
  padding: 28px;
  min-height: 745px;
}

.cardArea_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.cardArea_title_label {
  width: 3px;
  height: 17px;
  background-color: #5b79fb;
}

.cardArea_title_content {
  margin-left: 0.5%;
  font-size: 19px;
  font-family: Source Han Sans CN;
  font-weight: 550;
  color: #232323;
  letter-spacing: 2px;
}

.cardArea_tips {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.cardArea_tips_name {
  width: 100%;
  margin-top: 23px;
  padding: 12px 25px;
  background-color: #58aefe;
  border-radius: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  margin-right: 28px;
}

.cardArea_tips_name_width {
  width: 33%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.cardArea_tips_name_item {
  margin-left: 22px;
}

.cardArea_tips_record {
  width: 100%;
  margin-top: 23px;
  padding: 12px 25px;
  background-color: #1890ff;
  border-radius: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  margin-right: 28px;
}

.cardArea_tips_name_tips {
  font-size: 10px;
  color: #2af3e2;
  margin-left: 30px;
}

.processArea {
  margin-top: 35px;
  width: 379px;
  height: 158px;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0px 10px 23px 4px rgba(15, 76, 187, 0.07);
  background-image: linear-gradient(180deg, #f6f6f6f6, #ffffff);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.processArea_img {
  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.processArea_img > img {
  width: 49px;
  height: 53px;
}

.processArea_right {
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.processArea_right_item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.processArea_right_item_icon {
  width: 10px;
  height: 10px;
  background: #1890ff;
  transform: rotate(45deg);
}

.processArea_right_item_label {
  letter-spacing: 1px;
  margin-left: 14px;
  font-size: 15px;
  color: #5e5d5d;
}

.processArea_tips {
  text-align: right;
  font-size: 10px;
  color: #aeacac;
}

.cardArea_tabs {
  margin-top: 30px;
}

.cardArea_tabs_item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardArea_button {
  text-align: center;
  margin-top: 30px;
}
</style>
